<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //验证姓名文本框
        function checkName() {
            //得到文本框对象
            var txtObj = document.getElementById("name");
            var spanObj = document.getElementById("nameSpan");
            //定义正则表达式
            var rex = /^[a-zA-Z\u4e00-\u9fa5]{2,}$/;
            //验证字符串是否匹配正则表达式
            if(rex.test(txtObj.value)){
                spanObj.innerHTML = "验证通过";
                spanObj.style.color = "green";
                return true;
            }
            else{
                spanObj.innerHTML = "姓名必须为两位以上的字母或汉字";
                spanObj.style.color = "red";
                return false;
            }
        }

        function checkTel() {
            var textObj = document.getElementById("tel");
            var spanObj = document.getElementById("telSpan");
            if(/^1[3578]\d{9}$/.test(textObj.value)){
                spanObj.innerHTML = "验证通过";
                spanObj.style.color = "green";
                return true;
            }
            else{
                spanObj.style.color = "red";
                spanObj.innerHTML="电话必须为13、15、17、18开始的11位数";
                return false;
            }
        }
        function checkEmail() {
            var textObj = document.getElementById("email");
            var spanObj = document.getElementById("telEmail");
            if(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(textObj.value)){
                spanObj.innerHTML = "验证通过";
                spanObj.style.color = "green";
                return true;
            }
            else{
                spanObj.style.color = "red";
                spanObj.innerHTML="请输入正确的邮箱表达式";
                return false;
            }
        }
        function checkBirthday() {
            var textObj = document.getElementById("birthday");
            var spanObj = document.getElementById("telBirthday");
            if(/^(19|bai20)\d{2}-(1[0-2]|0?[1-9])-(0?[1-9]|[1-2][0-9]|3[0-1])$/.test(textObj.value)){
                spanObj.innerHTML = "验证通过";
                spanObj.style.color = "green";
                return true;
            }
            else{
                spanObj.style.color = "red";
                spanObj.innerHTML="请输入正确的生日格式，格式为XXXX-XX-XX";
                return false;
            }
        }

        function checkForm() {
            var passName = checkName();
            var passTel = checkTel();
            var passEmail = checkEmail();
            var passBirthday = checkBirthday();
            return passName && passTel && passEmail && passBirthday;
        }
    </script>
</head>
<body>
<form action="add" method="get" onsubmit="return checkForm();">
    姓名：<input type="text" id="name" name="name" onblur="checkName()"><span id="nameSpan"></span><br>
    电话：<input type="text" id="tel" name="tel" onblur="checkTel();"><span id="telSpan"></span><br>
    e-mail：<input type="text" id="email" name="email" onblur="checkEmail();"><span id="telEmail"></span><br>
    生日：<input type="text" id="birthday" name="birthday" onblur="checkBirthday();"><span id="telBirthday"></span><br>
    <input type="submit" value="提交">
</form>


</body>
</html>